<template>
  <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(banner, key, index) in banners"
        v-bind:key="index"
      >
        <img :src="banner.src" />
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-bullets"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        {
          src: "http://kexiepingtaieposter.hoohui.cn/paper_file/15908353622331590835195(1).png",
          link: "",
        },
        {
          src: "http://kexiepingtaieposter.hoohui.cn/paper_file/15908353884901590835256(1).jpg",
          link: "",
        },
      ],
      swiperOption: {
        loop: true,
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
        },
        on: {
          slideChange() {
            console.log("onSlideChangeEnd", this);
          },
          tap() {
            console.log("onTap", this);
          },
        },
      },
    };
  },
  mounted() {},
};
</script>
<style>
.swiperWrap {
  border: 1px solid rgb(255, 255, 255);
}
.swiper-slide {
  border: 1px solid green;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.swiper-container {
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #00ff33; /* 两种都可以 */
}
</style>